<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="google" content="notranslate" />
    <title>DrKIT Demo</title>
    <link rel="icon" href="https://ai.google/static/images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="https://www.gstatic.com/external_hosted/material_design_lite/mdl_css-blue-pink-bundle.css"/>
    <script defer src="https://www.gstatic.com/external_hosted/material_design_lite/mdl_all_js_compiled.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Google+Sans:+400,500,700|Product+Sans:400|Roboto+Mono:500" media="all"/>
    <link rel="stylesheet" href="static/drkit.css"/>
  </head>
  <body>
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <table>
            <tr>
              <td style="width: 20px" />
              <td>
                <span class="mdl-layout-title">
                  Differentiable Reasoning over a Virtual KB Demo
                </span>
              </td>
            </tr>
          </table>
        </div>
      </header>
      <main class="mdl-layout__content">
        <div class="page-content page-background-image">
          <div class="mdl-card mdl-shadow--2dp"
               style="width: 1400px; padding: 20px; margin-bottom: 50px;">
            <form>
              <table style="max-width: 1600px;">
                <tr>
                  <td>
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
                         style="width: 1200px;">
                      <input class="mdl-textfield__input" type="text" name="question" style="font-size: 32px;" value="{{ question }}"/>
                      <label class="mdl-textfield__label" for="input_text">Question</label>
                    </div>
                  <td>
                    <input type="submit" class="mdl-button mdl-js-button mdl-button--raised
                                                mdl-js-ripple-effect mdl-button--colored" onclick="myFunction()" value="Submit"/>
                  </td>
                </tr>
                <tr>
                </tr>
              </table>
            </form>
            <div id="searching" style="display: none; font-size: 20px;">
              <i>Analyzing 5,233,329 Wikipedia articles ...</i>
            </div>
            <div class="mdl-card"
                 style="width: 1350px; padding: 20px; ">
              <table cellpadding="20" class="answer">
                <tr>
                  <td colspan="2">
                    <div>
                      <font size="8" color="blue"><b> {{ answer }} </b></font>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div><b>{{ evidence0_title }}</b></div>
                  </td>
                  <td>
                    <div>{{ evidence0_context }}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div><b>{{ evidence1_title }}</b></div>
                  </td>
                  <td>
                    <div>{{ evidence1_context }}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div><b>{{ evidence2_title }}</b></div>
                  </td>
                  <td>
                    <div>{{ evidence2_context }}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div><b>{{ evidence3_title }}</b></div>
                  </td>
                  <td>
                    <div>{{ evidence3_context }}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div><b>{{ evidence4_title }}</b></div>
                  </td>
                  <td>
                    <div>{{ evidence4_context }}</div>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </main>
    </div>
    <script>
      function myFunction() {
        var x = document.getElementById("searching");
        if (x.style.display === "none") {
          x.style.display = "block";
        } else {
          x.style.display = "none";
        }
      }
    </script>
  </body>
</html>
